<template>
	<view class="one">
		<!-- 店铺信息移到蓝色区域 -->
		
		<view class="shop-info">
			<image class="shop-avatar" src="/static/tx.jpg" mode="aspectFill"></image>
			<text class="shop-name">{{shop.name}}</text>
		</view>
		
		<view class="nav">
			<!-- 扫码区域 -->
			<view class="scan-section">
				<view class="scan-item" @click="scanCode">
					<image src="/static/扫码@3x.png" mode="aspectFit"></image>
					<text class="scan-text" >扫码核销</text>
				</view>
				<navigator url="/packagesMy/inputVerification/inputVerification" class="scan-item" @click="inputCode">
					<image src="/static/输入2@3x.png" mode="aspectFit"></image>
					<text class="scan-text">输入核销码</text>
				</navigator>
			</view>
			
			<!-- 功能区域 -->
			<view class="function-grid">
				<view class="function-item" v-for="(item, index) in functions" :key="index" @click="handleFunction(item)">
					<view class="function-icon" :style="{backgroundColor: item.bgColor}">
						<image :src="item.icon" mode="aspectFit"></image>
						<view class="badge" v-if="item.badge">{{item.badge}}</view>
					</view>
					<text class="function-name">{{item.name}}</text>
				</view>
			</view>
			
			<!-- 最新通知 -->
			<view class="notice-section">
				<view class="notice-header">
					<view class="notice-title">
						<image src="/static/消息-信息@3x.png" mode="aspectFit"></image>
						<text>最新通知</text>
					</view>
					<view class="notice-more">
						今日需上门取车任务共32单
						<text class="arrow">›</text>
					</view>
				</view>
				
				<!-- 通知列表表头 -->
				<view class="notice-table-header">
					<text class="header-user">用户</text>
					<text class="header-service">服务项目</text>
					<text class="header-time">时间</text>
				</view>
				
				<!-- 通知列表 -->
				<view class="notice-list">
					<view class="notice-item" v-for="(item, index) in notices" :key="index">
						<text class="notice-user">{{item.user}}</text>
						<text class="notice-service">{{item.service}}</text>
						<text class="notice-time">{{item.time}}</text>
					</view>
				</view>
			</view>
		<!-- 救援信息 -->	
			<navigator url="/packagesMy/rescueInfo/rescueInfo" class="rescueMess">
				<view class="rescueTitle">
					救援信息
				</view>
				<view class="rescueBody">
					
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functions: [
					{ name: '经营统计', icon: '/static/统计@3x.png', bgColor: '#00B7FF' },
					{ 
						name: '核销记录', 
						icon: '/static/核销记录@3x.png', 
						bgColor: '#FF9F59',
						url: '/packagesMy/Records/Records'  // 添加跳转路径
					},
					{ name: '收支明细', icon: '/static/收支明细@3x.png', bgColor: '#739FFF' },
					{ name: '订单管理', icon: '/static/订单管理@3x.png', bgColor: '#FFD439', badge: '12' },
					{ name: '卡券管理', icon: '/static/卡券@3x.png', bgColor: '#739FFF' },
					{ name: '维修任务', icon: '/static/维修@3x.png', bgColor: '#00D8C4', badge: '12' ,
						url: '/packagesMy/maintenanceTask/maintenanceTask'
					},
					{ name: '评价管理', icon: '/static/评价管理@3x.png', bgColor: '#FF7B7B' },
					{ name: '商户资料', icon: '/static/资料库@3x.png', bgColor: '#00B7FF' },
					{ name: '活动发布', icon: '/static/活动@3x.png', bgColor: '#FF9F59' }
				],
				notices: [
					{ user: '张先生', service: '汽车美容、基础保养', time: '2022-03-10 11:09' },
					{ user: '张先生', service: '汽车精细', time: '2022-03-10 11:09' },
					{ user: '张先生', service: '车辆维修-上门取车', time: '2022-03-10 11:09' },
					{ user: '张先生', service: '汽车美容、基础保养', time: '2022-03-10 11:09' },
					{ user: '张先生', service: '车辆维修-到店维修', time: '2022-03-10 11:09' }
				],
				shop: ''
			}
		},
		mounted() {
			this.shop = uni.getStorageSync('shop')
			console.log(this.shop)
			// 如果没有登录则跳转到登录页面
			if (!this.shop) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			
		},
		methods: {
			// 扫码功能
			async scanCode() {
				try {
					uni.showLoading({
						title: '扫码中...'
					});
					
					// 将 uni.scanCode 包装成 Promise
					const scanResult = await new Promise((resolve, reject) => {
						uni.scanCode({
							onlyFromCamera: true,
							scanType: ['qrCode', 'barCode'],
							success: (res) => {
								resolve(res);
							},
							fail: (err) => {
								reject(new Error('扫码失败'));
							}
						});
					});

					// 先隐藏loading
					uni.hideLoading();

					// 扫码成功后，再处理结果
					if (scanResult && scanResult.result) {
						console.log('扫码成功：', scanResult.result);
						// 验证码格式检查
						if (!scanResult.result || scanResult.result.length < 6) {
							uni.showToast({
								title: '无效的验证码',
								icon: 'none'
							});
							return;
						}
						
						// 等待上一个操作完全结束
						await new Promise(resolve => setTimeout(resolve, 100));
						
						// 验证成功后再跳转
						uni.navigateTo({
							url: `/packagesMy/scanVerification/scanVerification?verificationCode=${encodeURIComponent(scanResult.result)}`,
							fail: () => {
								uni.showToast({
									title: '页面跳转失败',
									icon: 'none'
								});
							}
						});
					}

				} catch (error) {
					uni.showToast({
						title: error.message || '扫码失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},

			// 输入核销码
			inputCode() {
				uni.navigateTo({
					url: '/pages/inputCode/inputCode'  // 跳转到输入核销码页面
				});
			},
			handleFunction(item) {
				// 处理功能点击
				if (item.url) {
					uni.navigateTo({
						url: item.url,
						fail: (err) => {
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
							console.error('页面跳转失败:', err);
						}
					});
				}
			}
		}
	}
</script>

<style>
page{
	background:#F7F7F7;
}  
.one{
	padding-top: 20rpx;
	height: 250rpx;
	background-color: #2D80F9;
}
.nav{
	
}

/* 店铺信息 */
.shop-info {
	display: flex;
	align-items: center;
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;
}

.shop-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.shop-name {
	font-size: 26rpx;
	color: #FFFFFF;
	font-weight: 500;
}

/* 扫码区域 */
.scan-section {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 60rpx;
	margin: 0 30rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.scan-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
}


.scan-item:first-child::after {
	content: '';
	position: absolute;
	right: -30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 2rpx;
	height: 60%;
	background-color: #EEEEEE;
}

.scan-item image {
	width: 70rpx;
	height: 70rpx;
	margin-bottom: 16rpx;
}

.scan-item text {
	font-size: 19rpx;
	color: #333333;
	padding-top: 10rpx;
	font-weight: 500;
}

/* 功能区域 */
.function-grid {
	padding: 30rpx;
	margin: 30rpx;
	display: flex;
	flex-wrap: wrap;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	gap: 30rpx 0;  /* 添加垂直间距 */
}

.function-item {
	width: 33.33%;  /* 修改为三等分 */
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.function-icon {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10rpx;
	position: relative;
}

.function-icon image {
	width: 45rpx;
	height: 45rpx;
}

.badge {
	position: absolute;
	bottom: 0;
	right: -15rpx;
	bottom: -20rpx;
	background-color: #FF0000;
	color: #FFFFFF;
	font-size: 12rpx;
	width: 24rpx;
	height: 24rpx;
	line-height: 24rpx;
	text-align: center;
	border-radius: 50%;
	transform: scale(0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.function-name {
	font-size: 24rpx;
	color: #333;
	margin-top: 6rpx;  /* 增加文字与图标的间距 */
}

/* 通知区域 */
.notice-section {
	margin: 0 30rpx;
	padding: 20rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.notice-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10rpx 20rpx;
	border-bottom: 2rpx solid #F5F5F5;
}

.notice-title {
	display: flex;
	align-items: center;
}

.notice-title image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.notice-title text {
	font-size: 30rpx;
	color: #000000;
	font-weight: 600;
}

.notice-more {
	font-size: 24rpx;
	color: #FF6B6B;
	display: flex;
	align-items: center;
}

.arrow {
	font-family: "Arial";
	font-size: 36rpx;
	margin-left: 6rpx;
	line-height: 1;
	transform: scaleY(1.0);  /* 稍微拉长箭头 */
}

/* 表头和列表项共用的布局样式 */
.notice-table-header,
.notice-item {
	display: flex;
	padding: 12rpx 10rpx;
	font-size: 24rpx;
	align-items: center;
}

/* 表头样式 */
.notice-table-header {
	color: black;
	border-bottom: 2rpx solid #F5F5F5;
	font-weight: 500;
}

/* 用户列样式 */
.header-user,
.notice-user {
	width: 100rpx;
	text-align: center;
}

/* 服务项目列样式 */
.header-service,
.notice-service {
	flex: 1;
	padding: 0 15rpx;
	text-align: center;
}

/* 时间列样式 */
.header-time,
.notice-time {
	width: 200rpx;
	text-align: center;
	white-space: nowrap;
}

/* 列表项特有样式 */
.notice-user {
	color: #666666;
}

.notice-service {
	color: #666666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notice-time {
	color: #666666;
	font-size: 24rpx;
}

.notice-list {
	padding-top: 10rpx;
}

.notice-item {
	min-height: 60rpx;
}
// 救援信息
	.rescueMess{
		margin-top: 20rpx;
		margin-left: 30rpx;
		padding: 20rpx 30rpx;
		width: 600rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 200rpx;
	}
	.rescueMess > .rescueTitle{
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 2rpx solid #F5F5F5;
		height: 60rpx;
		margin-top: 10rpx;
	}
</style>
